<!DOCTYPE html>
<html lang="ch">
<head>
    <title></title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 总结：常用按键别名
        回车enter
        删除delete
        退出esc
        空格space
        换行tab,特殊，必须配合keydown去使用
        上up,下down,左left，右right
        2.配合keyup使用指定ctr+y  @keyup.ctr.y
        3.自定义按键 Vue.config.keyCodes.自定义名 = 键码
    -->
    <div id="demo">
        <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo"><br>
        <input type="text" placeholder="按下tab提示输入" @keydown.tab="showInfo"><br>
        <input type="text" placeholder="按下回车提示输入" @keyup.huiche="showInfo"><br>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //关闭生产提示
        Vue.config.keyCodes.huiche = 65 //定义了一个别名按键
        new Vue({
            el:"#demo",
            data:{
                name:"test",
            },
            methods:{
                showInfo(e){
                    console.log(e.key,e.target.value,e.keyCode)
                }
            }
        })
    </script>
</body>
</html>